import { CheckCircleOutlined, ClockCircleOutlined, SyncOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProCard,
  ProDescriptions,
  ProDescriptionsItemProps,
  ActionType,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';

import { Button, Steps, Tag } from 'antd';
import { useRef, useState } from 'react';
import { queryNegotiations } from '../service';
import { ComplaintTableItem, NegotiationTableItem } from '../types.d';
import { mapOperateType } from '../utils';
import ReplayUser from './ReplayUser';

interface DetailModalProps {
  citem: ComplaintTableItem;
  visible: boolean;
  close: () => void;
}
const EnhancedTag = (props: { state: string }) => {
  switch (props.state) {
    case 'PENDING':
      return (
        <Tag icon={<ClockCircleOutlined />} color="warning">
          待处理
        </Tag>
      );
    case 'PROCESSED':
      return (
        <Tag icon={<CheckCircleOutlined />} color="success">
          已处理完成
        </Tag>
      );
    default:
      return (
        <Tag icon={<SyncOutlined spin />} color="processing">
          处理中
        </Tag>
      );
  }
};
const mapHandleStatus = (state: string) => {
  switch (state) {
    case 'Processing':
      return 'process';
    case 'PROCESSED':
      return 'finish';
    default:
      return 'wait';
  }
};
const { Step } = Steps;
const DetailModal = (props: DetailModalProps) => {
  const { citem, visible, close } = props;
  const [replayVisible, setReplayVisible] = useState<boolean>(false);
  const [detailItem, setDetailItem] = useState<ComplaintTableItem>(citem);
  const ref = useRef<ActionType>();
  const detailColumns: ProDescriptionsItemProps<ComplaintTableItem>[] = [
    {
      title: '投诉单号',
      dataIndex: 'complaintId',
    },
    {
      title: '投诉时间',
      dataIndex: 'complaintTime',
      valueType: 'dateTime',
    },
    {
      title: '问题描述',
      dataIndex: 'problemDesc',
    },
    {
      title: '申请退款金额(元)',
      dataIndex: 'applyRefundAmount',
      fieldProps: {
        moneySymbol: false,
      },
      renderText: (text) => (text ? (text / 100).toFixed(2) : '-'),
    },
    {
      title: '用户投诉次数',
      dataIndex: 'complaintTimes',
      valueType: 'digit',
    },
    {
      title: '支付金额(元)',
      dataIndex: 'orderInfos',
      valueType: 'money',
      fieldProps: {
        moneySymbol: false,
      },
      renderText: (_, record) => {
        if (!record.orderInfos || record.orderInfos.length < 1) return '-';
        return (Number(record.orderInfos[0].amount) / 100).toFixed(2);
      },
    },
    {
      title: '被诉商户号',
      dataIndex: 'mchid',
    },
    {
      title: '微信支付订单号',
      dataIndex: 'orderInfos',
      renderText: (_, record) => {
        if (!record.orderInfos || record.orderInfos.length < 1) return '暂无数据';
        return record.orderInfos[0].payOrderNo;
      },
    },
    {
      title: '投诉人联系方式',
      dataIndex: 'phone',
    },
    {
      title: '平台支付号',
      dataIndex: 'orderInfos',
      renderText: (_, record) => {
        if (!record.orderInfos || record.orderInfos.length < 1) return '暂无数据';
        return record.orderInfos[0].payNo;
      },
    },
    {
      title: '投诉人openid',
      dataIndex: 'openId',
    },
  ];
  const historyColumns: ProColumns<NegotiationTableItem>[] = [
    {
      title: '时间',
      dataIndex: 'operateTime',
      align: 'center',
      valueType: 'dateTime',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '角色',
      dataIndex: 'operator',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '动作类型',
      dataIndex: 'operateType',
      align: 'center',
      hideInSearch: true,
      hideInForm: true,
      renderText: (text) => mapOperateType(text),
    },
    {
      title: '内容',
      dataIndex: 'operateDetails',
      hideInSearch: true,
      hideInForm: true,
    },
  ];
  return (
    <ModalForm
      width="85vw"
      style={{
        minWidth: '1000px',
      }}
      submitter={false}
      visible={visible}
      modalProps={{
        destroyOnClose: true,
        maskClosable: false,
        onCancel: close,
      }}
      title={
        <>
          投诉单号：{detailItem.complaintId} <EnhancedTag state={detailItem.state} />
        </>
      }
    >
      <ProCard title="投诉信息">
        <ProDescriptions column={2} columns={detailColumns} dataSource={detailItem} />
      </ProCard>
      <ProCard
        title="投诉进展"
        extra={
          <>
            {!detailItem.fullRefunded && <Button>退款</Button>}
            {detailItem.waitResponse && (
              <Button
                type="primary"
                style={{ marginLeft: '5px' }}
                onClick={() => {
                  setReplayVisible(true);
                }}
              >
                回复用户
              </Button>
            )}
            {detailItem.state != 'PROCESSED' && (
              <Button style={{ marginLeft: '5px' }}>处理完成</Button>
            )}
          </>
        }
      >
        <Steps progressDot style={{ paddingTop: '50px' }} labelPlacement="vertical">
          <Step status="finish" title="用户发起投诉" />
          <Step status={detailItem.state == 'PENDING' ? 'process' : 'finish'} title="待处理" />
          <Step status={mapHandleStatus(detailItem.state)} title="处理中" />
          <Step status={detailItem.state == 'PROCESSED' ? 'finish' : 'wait'} title="已处理完成" />
        </Steps>
      </ProCard>
      <ProCard title="协商历史">
        <ProTable
          columns={historyColumns}
          search={false}
          rowKey="logId"
          columnEmptyText="暂无数据"
          size="small"
          options={false}
          actionRef={ref}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            defaultPageSize: 10,
            size: 'small',
          }}
          debounceTime={300}
          request={async (param) => {
            const res = await queryNegotiations(detailItem.complaintId, param);
            return res;
          }}
        />
      </ProCard>
      {replayVisible && (
        <ReplayUser
          complaintId={detailItem.complaintId}
          visible={replayVisible}
          close={(newItem?: ComplaintTableItem) => {
            if (newItem) {
              setDetailItem(newItem);
              ref.current?.reload();
            }
            setReplayVisible(false);
          }}
        />
      )}
    </ModalForm>
  );
};

export default DetailModal;
